<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <script type="text/javascript" src="assets/jwplayer.min.js"></script>
    <title>Captions Styling</title>
    <link type="text/css" rel="stylesheet" href="assets/style.css" />

</head>
<body>

<h2>Captions Styling</h2>

<div id="player"></div>
<script type="text/javascript">
function loadPlayer(options) {
    jwplayer("player").setup({
        file: 'http://content.bitsontherun.com/videos/7OCSON1y.mp4',
        height: 300,
        plugins: {
            '../captions.js': options
        },
        flashplayer: 'assets/player.swf',
        stretching: 'fill',
        width: 600
    });
}
</script>


<ul>
    <li><a href="javascript:loadPlayer({color:'FFCC00',file:'assets/corrie.srt',fontFamily:'Georgia',fontSize:20,fontStyle:'italic',fontWeight:'bold',textDecoration:'underline'})">config styling</a><br/>
        Captions should be bold, big, italic, yellow, underlined and serifed.</li>
    <li><a href="javascript:loadPlayer({file:'assets/corrie-styled.xml'})">dfxp styling</a><br/>
        Captions vary in style, size and color. Focus on whether all captions display.</li>
    <li><a href="javascript:loadPlayer({file:'assets/corrie-speakers.xml',fontFamily:'Georgia',fontSize:20,fontStyle:'italic',fontWeight:'bold'})">config &amp; dfxp styling</a><br/>
        Captions should be bold, big, italic and serifed. Every speaker should have its own color.</li>
    <li><a href="javascript:loadPlayer({file:'assets/corrie-styled.srt'})">html in srt</a><br/>
        Captions have the same variations as in case 2. All lines should render correctly.</li>
</ul>

<p>Test all cases in Flash, plus the first case in one HTML5/MP4 browser (Chrome, IE9 or Safari).</p>

</body>
</html>